{% extends 'manage.html' %}
{% load static %}
{% block css %}
  <link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.preview.min.css' %}">
  <style>
    .panel-default{
        margin-top: 10px;
    }
    .panel-default .panel-heading {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
    .panel-body{
        padding: 0px;
    }
    .title-list{
        border-right: 1px solid #dddddd;
        min-height: 500px;
    }

    .title-list ul {
            padding-left: 15px;
        }

    .title-list ul a {
            display: block;
            padding: 5px 0;
        }
    .content{
        border-left: 1px solid #dddddd;
        min-height: 600px;
        margin-left: -1px;
    }
  </style>
{% endblock %}

{% block content %}
  <div class="container-fluid">

  <div class="panel panel-default">
  <div class="panel-heading">
    <div>
    <i class="fa fa-book" aria-hidden="true"></i> wiki文档:
    </div>
    <div class="function">
                    <a type="button" class="btn btn-success btn-xs"
                       href="{% url 'web_wiki_add' project_id=request.tracer.project.id %}">
                        <i class="fa fa-plus-circle" aria-hidden="true"></i> 新建
                    </a>
                    {% if wiki_object %}
                      <a type="button" class="btn btn-primary btn-xs"
                       href="{% url 'web_wiki_edit' project_id=request.tracer.project.id wiki_id=wiki_object.id %}">
                        <i class="fa fa-edit" aria-hidden="true"></i> 编辑
                    </a>

                      <a type="button" class="btn btn-danger btn-xs"
                       href="{% url 'web_wiki_delete' project_id=request.tracer.project.id wiki_id=wiki_object.id %}">
                        <i class="fa fa-trash" aria-hidden="true"></i> 删除
                    </a>

                    {% endif %}

      </div>
  </div>
  <div class="panel-body">
    <div class="col-sm-3 title-list">
      <ul id="catalog">
{#              ctalog#}
      </ul>

    </div>

    <div class="col-sm-9 content">
      {% if wiki_object %}
           <div id="previewMarkDown">
           <textarea>{{ wiki_object.content }}</textarea>

           </div>
        {% else %}
      <div style="text-align: center;margin-top: 50px">
        <h4>《{{ request.tracer.project.name }}》 wiki文档库</h4>
        <a href="{% url 'web_wiki_add' project_id=request.tracer.project.id %}">
           <i class="fa fa-plus-circle" aria-hidden="true"></i>新建文章
        </a>
      </div>
      {% endif %}
    </div>
  </div>
</div>


  </div>
{% endblock %}

{% block js %}
    <script src="{% static 'plugin/editor-md/editormd.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/marked.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/prettify.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/raphael.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/underscore.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/sequence-diagram.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/flowchart.min.js' %}"></script>
    <script src="{% static 'plugin/editor-md/lib/jquery.flowchart.min.js' %}"></script>
  <script>
     var WIKI_DETAIL_URL = "{% url 'web_wiki' project_id=request.tracer.project.id %}";
     $(function (){
         initCatalog();
         initpreview();
     });
     function initpreview(){
         editormd.markdownToHTML("previewMarkDown",{
             htmlDebode: "style,script,iframe"
         })
     };
     function initCatalog(){
         $.ajax({
             url:"{% url 'web_wiki_catalog' project_id=request.tracer.project.id %}",
             type:"GET",
             dataType:"JSON",
             success:function (res){
                 console.log (res);
                 if(res.status){
                    $.each(res.data, function (index,item) {
                         var href = WIKI_DETAIL_URL+"?wiki_id="+item.id;
                         var li = $("<li>").attr('id',"id_" + item.id).append($('<a>').text(item.title).attr('href',href) ).append($('<ul>'));
                          if(!item.parent_id){
                              //添加到自己打catalog里面
                              $('#catalog').append(li);
                          }else{

                              $("#id_"+ item.parent_id).children('ul').append(li);
                          }
                    })
                 }else{
                     alert("初始化目录失败")
                 }

             }
         })
     };
  </script>
{% endblock %}